<template>
  <div class="smart-page-wrapper">
    <div class="smart-page-header">
      <a-page-header :title="title" :subtitle="subTitle" :show-back="false">
        <template #extra>
          <a-space>
            <slot name="actions"/>
          </a-space>
        </template>
      </a-page-header>
      <div v-if="$slots.search" class="search-wrapper">
        <slot name="search"/>
      </div>
    </div>
    <div class="content-wrapper">
      <slot/>
    </div>
  </div>
</template>

<script setup name="smart-page" lang="ts">
import {computed, onMounted} from 'vue'
import {useRouter} from 'vue-router'

const {currentRoute} = useRouter()
const title = computed(() => currentRoute.value.meta.title)
const subTitle = computed(() => currentRoute.value.meta.description)
// @ts-ignore
onMounted(() => document.title = currentRoute.value.meta.title)
</script>

<style lang="less" scoped>
.smart-page-wrapper {
  width: 100%;
  margin: 0;
  padding: 0;



  .smart-page-header {
    background: var(--color-bg-2);
    margin-bottom: 12px;
    border-radius: 2px;

    :deep(.arco-page-header-wrapper) {
      padding: 0 12px;
    }

    .search-wrapper {
      border-top: 1px solid var(--color-neutral-3);
      padding: 12px;
      width: 100%;

    }
  }

  .content-wrapper {
     background: var(--color-bg-2);
    padding: 12px;
    margin-top: 12px;
    border-radius: 2px;
    width: 100%;


  }
}
</style>
